<template>
	<view>
		<view class="tabs-container">
			<view class="tabs-nav">
				<view class="tab-item" :class="{ 'active': currentIndex === 0 }" @click="switchTab(0)">
					<icon class="iconfont icon-gonggao" style="font-size:24px;"></icon>
					<view>公告通知</view>
				</view>
				<view class="tab-item" :class="{ 'active': currentIndex === 1 }" @click="switchTab(1)">
					<icon class="iconfont icon-xitongtongzhi" style="font-size:24px;"></icon>
					<view>系统通知</view>
				</view>
			</view>
			<swiper :current="currentIndex" class="tabs-content" duration="300" @change="onSwiperChange">
				<swiper-item>
					<view class="tab-content">
						<view>这是标签一的内容</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="tab-content">
						<view>这是标签二的内容</view>
					</view>
				</swiper-item>
			  </swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			switchTab(index) {
				this.currentIndex = index;
			},
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			}
		}
	}
</script>

<style>
.tabs-container {
  width: 100%;
}

.tabs-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.tabs-content {
  height: 1125rpx; /* 或者其他你想要的高度 */
  background-color: #fff;
}
.tab-icon {
  width: 30rpx; /* 图片宽度 */
  height: 30rpx; /* 图片高度 */
  margin-right: 10rpx; /* 图片与文字之间的间距 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tab-item .iconfont {
  margin-bottom: 5px; /* 可以根据需要调整间距 */
}
</style>
